<script setup>
import { useDisplay } from "vuetify";
import ToolbarUser from '@/components/navigation/ToolbarUser.vue';
const { mdAndUp } = useDisplay();
// const showMobileSearch = ref(false);
import { useRoute, useRouter } from 'vue-router';

// 设置滚动状态
const scrolled = ref(false)

const onScroll = () => {
  scrolled.value = window.scrollY > 0;
}

onMounted(() => {
  window.addEventListener('scroll', onScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', onscroll)
})


// 页面数据
const pages = ref([
  { name: '首页', to: '/' },
  { name: '视频课程', to: '/VideoCourse' },
  { name: '实践展演', to: '/CoursePerformance' },
  { name: '岭南文化', to: '/lingnanCulture' }
]);
const currentRoute = useRoute();

const router = useRouter()
const GoHome = () => {
  router.push({ path: '/' })
}
</script>

<template>
  <v-app-bar :color="scrolled ? '' : 'transparent'" :flat="!scrolled" class="appBar">
    <div class="title d-flex align-center ml-16" @click="GoHome">
      <div class="logo"></div>
      <div class="title-text ml-2" style="text-shadow: 0 0 10px #ffffff;">南苑文传课堂</div>
    </div>
    <v-spacer></v-spacer>
    <!-- 跳转按钮 -->
    <div class="topage d-flex algin-center">
      <router-link v-for="page in pages" :key="page.name" :to="page.to" class="mr-6 nav-link"
        :class="{ 'router-link-active': currentRoute.path === page.to }">
        {{ page.name }}
      </router-link>
    </div>
    <!-- 分割线 -->
    <v-divider vertical thickness="2" inset class=""></v-divider>

    <ToolbarUser />
  </v-app-bar>
</template>

<style scoped lang="scss">
.appBar :hover {
  background-color: white !important;
  transition: opacity 0.5s ease-in-out;
}

.title {
  cursor: pointer;
}

.logo {
  width: 50px;
  height: 50px;
  background-image: url('https://kanekikeh.online/wclogo.png');
  background-repeat: no-repeat;
  background-size: contain;
}

.nav-link {
  text-decoration: none;
  /* 移除下划线 */
  color: inherit;
  /* 可选，使链接颜色与周围文字一致 */
  position: relative;
  text-shadow: 0 0 10px #ffffff;

  &::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e90ff;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: right;
  }

  &:hover {
    cursor: pointer;
    color: #1e90ff;
  }

  &:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* 为激活状态添加样式 */
.nav-link.router-link-active {
  font-weight: bold;
  color: rgba(65, 166, 243, 1);
}
</style>
